<template>
    <div id="home">
        <head-top>
            <h1 slot="title" >首页</h1>
        </head-top>
        <scroller
                class="container_scroller"
                style="top:2rem;"
                  :on-refresh="refresh"
                  :on-infinite="infinite"
                  ref="container_scroller">
                <div class="container">
                    <section class="">
                        <!-- Slider main container -->
                        <div class="swiper-container">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                <div class="swiper-slide">Slide 1</div>
                                <div class="swiper-slide">Slide 2</div>
                                <div class="swiper-slide">Slide 3</div>
                                ...
                            </div>
                            <!-- If we need pagination -->
                            <div class="swiper-pagination"></div>




                        </div>
                    </section>
                    <section class="handpick block">
                        <div class="caption">
                            <a class="selected btn">精选</a>
                            <div class="release btn fr"><i class="img-icon"></i>发布广告</div>
                        </div>
                        <ul>
                            <li class="item clearfix">

                                <div class="fl">
                                    <h4><a>认识您一辈子，愿我们白首偕老幸福久久</a></h4>
                                    <time class="date">2016-5-5</time>
                                    <span class="time">8965浏览</span>
                                </div>
                                <div class="fr">
                                    <a><img src="static/assets/images/background-image.png"></a>
                                </div>
                            </li>
                            <li class="item clearfix">

                                <div class="fl">
                                    <h4><a>认识您一辈子，愿我们白首偕老幸福久久</a></h4>
                                    <time class="date">2016-5-5</time>
                                    <span class="time">8965浏览</span>
                                </div>
                                <div class="fr">
                                    <a><img src="static/assets/images/background-image.png"></a>
                                </div>
                            </li>
                            <li class="item clearfix">

                                <div class="fl">
                                    <h4><a>认识您一辈子，愿我们白首偕老幸福久久</a></h4>
                                    <time class="date">2016-5-5</time>
                                    <span class="time">8965浏览</span>
                                </div>
                                <div class="fr">
                                    <a><img src="static/assets/images/background-image.png"></a>
                                </div>
                            </li>
                        </ul>
                    </section>
                    <section class="advert block">
                        <div class="caption">
                            <a class="advert-column btn">广告</a>
                        </div>
                        <ul>
                            <li v-if="adLists.length === 0">没有数据 </li>
                            <li v-else class="item clearfix" v-for="item in adLists">
                                    <div class="fl">
                                        <router-link to="/">
                                            <img :src="item.header_pic">
                                            <span>{{item.nickname}}</span>
                                        </router-link>
                                    </div>
                                    <router-link to="/" class="fr">
                                        <h4>{{item.content }}</h4>
                                        <time class="date">{{item.pubtime }}</time>
                                        <span class="time">{{item.click_count }}浏览</span>
                                    </router-link>
                            </li>
                        </ul>
                    </section>
                </div>
        </scroller>
        <foot-menu>
        </foot-menu>
    </div>
</template>

<style lang="scss" scoped>
    @import "../../style/mixin.scss";
.swiper-slide{
    height: 200px;
}
    .handpick,
    .advert{
        font-size: 0.7rem;
        ul li {
            padding: .5rem;
        }

        .caption {
            padding: 0.6rem;
            border-bottom: 0.05rem solid #DBDBDB;

        }

        .item .date,
        .item .time {
            float: left;
            margin-top: 0.4rem;
            color: #ccc;
        }

        .item .time {
            float: right;
        }
    }



    .handpick {

        .caption {

            .selected {
                color: #FF840D;
                border-color: #FF840D;
            }

            .release {
                background-color: #1DB208;
                color: #ffffff;
                position: relative;
                padding-left: 1rem;
            @include img-icon(0.3rem, 0.25rem, "../../images/img_icon_edit.png");

            }

        }


        .fl {
            width: 70%;
            box-sizing: border-box;
            padding-right: 0.6rem;

        h4 {
            line-height: 1.2rem;
            font-weight: bold;
        }

        }
        .fr {
            width: 30%;
            box-sizing: border-box;

            img {
                width: 100%;
            }

        }

    }


    .advert{
        margin-top: 1rem;

        .caption {

            .advert-column {
                color: #09AB00;
                border-color: #09AB00;
            }
        }
        .fl {
            width: 25%;
            box-sizing: border-box;
            padding-right: 0.6rem;
            a{
                display: inline-block;
                img {
                    display: inline-block;
                    width: 2.5rem;
                    height:  2.5rem;
                    overflow: hidden;
                    border-radius: 50%;
                    border: 0.1rem solid #EBEBEB;
                }
                span{
                    text-align: center;
                    display: block;
                    font-size: 0.6rem;
                    line-height: 0.8rem;
                    color: #09AB00;

                }
            }



        }
        .fr {
            width: 75%;
            box-sizing: border-box;

            h4 {
                line-height: 1.2rem;
                font-weight: bold;
            }

        }
    }
</style>

<script>
    import headTop from '../../components/header/headTop'
    import footMenu from '../../components/footer/footMenu.vue'
    import Swiper from 'swiper/dist/js/swiper'
    import  'swiper/dist/css/swiper.css'
    import {mapGetters, mapActions} from "vuex";
    export default {
        data() {
            return {
                page:0
            }
        },
        components: {
            headTop,
            footMenu
        },
        mounted() {
            let _this =this;
            this.adListPostDispatch({
                page:this.page
            }).then(res => {
                _this.$refs.container_scroller.resize()
            });

            var mySwiper = new Swiper ('.swiper-container', {
                // Optional parameters
                loop: true,

                // If we need pagination
                pagination: '.swiper-pagination',

            })

        },
        computed: {
            ...mapGetters([
                "adLists"
            ]),

        },
        methods: {
            ...mapActions([
                "adListPostDispatch"
            ]),
            refresh() {
                setTimeout(() => {
                    console.log("刷新")
                    if (this.$refs.container_scroller)
                        this.$refs.container_scroller.finishPullToRefresh()
                }, 1500)

            },
            infinite() {
                let _this =this;
                setTimeout(()=>{
                    console.log("加载数据")
                    _this.page++
                    console.log(_this.page)
                    if(_this.page > 0){
                        _this.adListPostDispatch({
                            page:_this.page
                        }).then(res=>{
                            if (_this.$refs.container_scroller)
                                _this.$refs.container_scroller.finishInfinite(true)
                        });
                    }
                }, 1000);
//                this.page++
              /*  setTimeout(() => {
                    console.log("加载数据")
                    this.adListPostDispatch({
                        page:this.page++
                    });
                    setTimeout(() => {
                        if (this.$refs.container_scroller)
                            this.$refs.container_scroller.finishInfinite(true)
                    })
                }, 1500)*/
            }
        },

    }
</script>
